<template>
  <div>
    <div class="projects">
      <h2 class="projects_title">项目</h2>
      <button
        type="button"
        class="btn btn-sm btn-outline-primary projects_create_2"
        v-on:click="viewItem = 0"
      >
        Search
      </button>
      <button
        type="button"
        class="btn btn-sm btn-outline-secondary projects_create"
        v-on:click="viewItem = 1"
      >
        Create
      </button>
    </div>
    <hr />
    <div class="search_area" v-if="viewItem == 0">
      <div class="row">
        <div class="col-md-4" :key="project.id" v-for="project in projects">
          <!-- <div class="col-md-4" > -->
          <div
            class="
              row
              no-gutters
              border
              rounded
              overflow-hidden
              flex-md-row
              mb-4
              shadow-sm
              h-md-250
              position-relative
              project-item
            "
            v-on:click="gotoWorkspace(project)"
          >
            <div class="col p-4 d-flex flex-column position-static">
              <strong class="d-inline-block mb-2 text-success"
                >{{ scenery2str(project.scenery) }}
                {{ scale2str(project.scale) }}</strong
              >
              <h3 class="mb-0">{{ project.name }}</h3>
              <div class="mb-1 text-muted">{{ project.date }}</div>
              <p class="card-text mb-auto">
                {{ project.introduction }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="search_create" v-if="viewItem == 1">
      <div class="col-md-8 order-md-1">
        <form class="needs-validation" novalidate="">
          <div class="row">
            <div class="col-md-12 mb-3">
              <label for="firstName">项目名称</label>
              <input
                type="text"
                class="form-control"
                id="firstName"
                placeholder=""
                v-model="createItem.name"
              />
            </div>
          </div>
          <div class="row">
            <div class="col-md-12 mb-3">
              <label for="firstName">项目简介</label>
              <input
                type="text"
                class="form-control"
                id="firstName"
                placeholder=""
                v-model="createItem.introduction"
              />
            </div>
          </div>

          <div class="row">
            <div class="col-md-6">
              <label for="country">场景</label>
              <select
                class="custom-select d-block w-100"
                id="country"
                required=""
                v-model="createItem.sceneryItem"
              >
                <option value="0">高校环境</option>
                <option value="1">工厂环境</option>
                <option value="2">车站环境</option>
                <option value="3">家居环境</option>
              </select>
              <div class="invalid-feedback">Please select a valid country.</div>
            </div>
            <div class="col-md-6">
              <label for="state">规模</label>
              <select
                class="custom-select d-block w-100"
                id="state"
                required=""
                v-model="createItem.scaleItem"
              >
                <option value="0">小</option>
                <option value="1">中</option>
                <option value="2">大</option>
              </select>
            </div>
          </div>
          <hr class="mb-4" />
          <div class="row">
            <div class="col-md-6">
              <button
                class="btn btn-primary btn-lg btn-block"
                type="submit"
                v-on:click="createEnviroment()"
              >
                创建项目
              </button>
            </div>
            <div class="col-md-6">
              <button
                class="btn btn-secondary btn-lg btn-block"
                type="submit"
                v-on:click="cancelCreateEnvironment()"
              >
                取消创建
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import { sceneNameArr, scaleArr } from "@/module/name.js";
export default {
  name: "DashboardProjects",
  components: {},
  data: function () {
    let projects = JSON.parse(localStorage.getItem("projects"));
    if (projects == null) {
      projects = [];
    }
    return {
      viewItem: 0,
      createItem: {
        name: "",
        introduction: "",
        sceneryItem: 0,
        scaleItem: 0,
      },
      projects: projects,
    };
  },
  props: {},
  methods: {
    createEnviroment: function () {
      console.log("创建环境");
      this.projects.push({
        id: this.projects.length + 1,
        name: this.createItem.name,
        scenery: this.createItem.sceneryItem,
        scale: this.createItem.scaleItem,
        date: new Date().toLocaleString(),
        introduction: this.createItem.introduction,
      });
      localStorage.setItem("projects", JSON.stringify(this.projects));
      this.viewItem = 0;
    },
    cancelCreateEnvironment: function () {
      console.log("取消创建环境");
      this.viewItem = 0;
    },
    gotoWorkspace: function (project) {
      this.$router.push({
        path: "/workspace",
        query: {
          name: project.name,
        },
      });
    },
    scenery2str: function (item) {
      if (item < sceneNameArr.length) {
        return sceneNameArr[item];
      } else {
        return "None";
      }
    },
    scale2str: function (item) {
      if (item < scaleArr.length) {
        return scaleArr[item];
      } else {
        return "None";
      }
    },
  },
  computed: {},
};
</script>

<style scoped>
.projects {
  height: 50px;
  position: relative;
}
.projects_title {
  top: 10px;
  position: absolute;
}
.projects_create {
  top: 18px;
  right: 50px;
  position: absolute;
}
.projects_create_2 {
  top: 18px;
  right: 120px;
  position: absolute;
}
.project-item {
  cursor: pointer;
}
.project-item:hover {
  background: #eee;
}

.create_popper {
  width: 300px;
  position: fixed;
}
</style>